/* eslint-disable react-hooks/exhaustive-deps */
import React, { useContext, useEffect } from 'react'
import ReactEcharts from 'echarts-for-react'
import { getAnimationCourseCount } from '@/services/student'
import { useState } from 'react'
import { Empty } from 'antd';
import { CourseContext } from '../../..';
export default function Animate() {
  const [xData, setXData] = useState([]);
  const [yData, setYData] = useState([]);
  const ctx = useContext(CourseContext);
  useEffect(() => {
    (async () => {
      const data = await getAnimationCourseCount({ uid: ctx.uid, courseId: ctx.courseId });
      const xArr = data.result?.map((item: { courseItemName: string, courseStepName: string }) => {
        return `${item?.courseItemName}-${item?.courseStepName}`
      })
      const yArr = data.result?.map((item: { historyStar: number }) => {
        return item.historyStar;
      })
      setXData(xArr)
      setYData(yArr)
    })()
  }, [ctx])
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'horization',
      x: 'right',
      y: 'center',
      data: ['动画课得星']
    },
    grid: {
      right: '120',
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true,
        show: false
      },
      axisLabel: {
        interval: 0,
        rotate: -25,
        textStyle: {
          color: '#000',
          fontSize: 12,

        }
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
      },
      splitNumber: 10,
      minInterval: 1,
    },
    series: [
      {
        name: '动画课得星',
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: "#ff5e5c",
            lineStyle: {
              color: "#ff5e5c"
            }, label: {
              show: true
            }
          }
        },
        data: yData
      },

    ]
  }
  return (
    <div>
      {
        xData?.length !== 0 || yData?.length !== 0 ?
          <ReactEcharts notMerge option={option} /> :
          <Empty description={'还没有已解锁的动画课'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
      }
    </div>
  )
}
